<template>
  <div class="contains">
    <ul>
      <li v-for="(item, index) in getData" :key="index">
        <a href="#"><img :src="item.big_image" alt="" /></a>
        <div>
          <p>{{ item.article_title }}</p>
          <div>
            <span>{{ item.tags[0] }}</span>
            <i>
              <van-icon name="browsing-history-o" /><span>{{
                item.views
              }}</span>
              <b>|</b>
              <van-icon name="good-job-o" /><span>{{ item.good }}</span>
            </i>
          </div>
        </div>
        <span class="mackspan">推荐</span>
      </li>
    </ul>
    <p><a href="#">发现更多</a></p>
  </div>
</template>

<script>
import instance from "../utils/request";
import {base_url} from '../utils/baseURL'
export default {
  data() {
    return {
      getData: null,
    };
  },
  created() {
    instance.post(`${base_url}guideData`).then((res) => {
      // console.log(res)
      this.getData = res.data.data.data.models;
    });
  },
};
</script>

<style lang="less" scoped>
.contains {
  background: #f8f8f8;
  padding: 0.93rem 0 0rem;
  ul {
    li {
      margin-top: 0.1rem;
      position: relative;
      background: white;
      a {
        display: inline-block;
        width: 100%;
        height: 1.66rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      > div {
        padding: 0 0.1rem;
        p {
          font-size: 0.16rem;
          color: #181818;
          margin-top: 0.2rem;
        }
        div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 0.14rem;
          color: #777;
          padding: 0.2rem 0;
          span:nth-child(1) {
            display: inline-block;
            padding: 0.03rem;
            background: #f4f4f4;
            font-size: 0.12rem;
          }
          b {
            margin: 0 0.05rem;
            color: #ccc;
            font-size: 0.12rem;
          }
        }
      }
      .mackspan {
        position: absolute;
        width: 0.36rem;
        height: 0.18rem;
        background: #ff9a36;
        top: 0.1rem;
        left: 0;
        border-radius: 0 0.09rem 0.09rem 0;
        font-size: 0.13rem;
        color: white;
        text-align: center;
      }
    }
  }
  > p {
    height: 1rem;
    text-align: center;
    line-height: 1rem;
    a {
      color: #999;
      text-decoration: underline;
      font-size: 0.13rem;
    }
  }
}
</style>